<!-- 功能图标组组件 -->

<template>
	<view class="flex fwrap">
		<view class="center" v-for="(item,index) in list" :key="index" :style="{width: 100/column + '%'}"
			@click="$emit('active',item)">
			<view class="flex jcenter">
				<h-function-icon :icon="item[icon]  || 'h-biaoti'" :iconSize="iconSize" :iconColor="iconColor"
					:width="width" :height="height" :background="item[background] || '#e64758'" :gradients="gradients"
					:boxShadow="boxShadow" :decorate="decorate" :borderRadius="borderRadius"
					:badge="item[badge]"></h-function-icon>
			</view>
			<view class="family600 line20 size13">
				<view class="padding7-5 paddingB15">
					{{item[text]}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @description 功能图标组组件
	 * @example h-function-icon></h-function-icon>
	 * 
	 * @property {Array}			list				功能图标组数据列表
	 * @property {Number}			column				每行显示几列（默认 4）
	 * @property {String}			iconSize			图标大小（默认 50rpx ）
	 * @property {String}			iconColor			图标颜色（默认 #fff ）
	 * @property {String}			width				背景宽度（默认 100rpx ）
	 * @property {String}			height				背景高度（默认 100rpx ）
	 * @property {Boolean}			gradients			是否开启背景渐变色（默认 true ）
	 * @property {Boolean}			boxShadow			是否开启背景阴影（默认 true ）
	 * @property {Boolean}			decorate			是否开启装饰（默认 true ）
	 * @property {String}			borderRadius		背景圆角（默认 20rpx ）
	 * @property {String}			text				list中-文字字段（默认 text ）
	 * @property {String}			icon				list中-矢量图标代码字段 （默认 icon ）
	 * @property {String}			background			list中-背景颜色字段（默认 background ）
	 * @property {String}			badge				list中-微标字段（默认 badge） 
	 * 
	 * 使用uview-ui 的徽标组件，相关api可参考uview-ui 文档，可自行修改<h-funciton-icon>组件中的徽标属性
	 * 
	 * @event {Function} active			点击图标时触发（返回参数为传入的id）
	 */
	export default {
		// 小程序穿透样式
		options: {
			styleIsolation: 'shared'
		},
		name: 'h-imageText',
		data() {
			return {}
		},
		props: {
			// 功能图标组数据列表
			list: {
				type: Array,
				default: () => [{
					icon: "h-biaoti",
					text: "功能一",
				}, {
					icon: "h-dingwei",
					text: "功能二",
				}, {
					icon: "h-huiyuan",
					text: "功能三",
				}, {
					icon: "h-biaozhi",
					text: "功能四",
				}]
			},
			// 每行显示几列
			column: {
				type: Number,
				default: 4
			},
			// 图标大小
			iconSize: {
				type: String,
				default: '50rpx'
			},
			// 图标颜色
			iconColor: {
				type: String,
				default: '#fff'
			},
			// 背景宽度
			width: {
				type: String,
				default: '100rpx'
			},
			// 背景高度
			height: {
				type: String,
				default: '100rpx'
			},
			// 是否开启背景渐变色
			gradients: {
				type: Boolean,
				default: true
			},
			// 是否开启背景阴影
			boxShadow: {
				type: Boolean,
				default: true
			},
			// 是否开启装饰
			decorate: {
				type: Boolean,
				default: true
			},
			// 背景圆角
			borderRadius: {
				type: String,
				default: '20rpx'
			},
			// list中-文字字段
			text: {
				type: String,
				default: 'text'
			},
			// list中-矢量图标代码字段
			icon: {
				type: String,
				default: 'icon'
			},
			// list中-背景颜色字段
			background: {
				type: String,
				default: 'background'
			},
			// list中-微标字段
			badge: {
				type: String,
				default: 'badge'
			},
			
			
		},
		methods: {}
	}
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.fwrap {
		flex-wrap: wrap;
	}

	.family600 {
		font-weight: 600;
	}

	.line20 {
		line-height: 40rpx;
	}

	.size13 {
		font-size: 26rpx;
	}

	.padding7-5 {
		padding: 14rpx 10rpx;
	}

	.center {
		text-align: center;
	}

	.paddingB15 {
		padding-bottom: 30rpx;
	}

	.jcenter {
		justify-content: center;
	}
</style>